<!-- components/MyPoints.vue -->
<template>
	<view class="my-points">
		<view class="points-content">
			<view class="points-btn">
				<text>我的积分</text>
				<up-button class="btn" text="兑换记录" @click="toAccount"></up-button>
				<!-- <button> <image src="/static/index_slices/small-more.png"></image></button> -->
			</view>
			<view class="points-num">
				<text>{{parseInt(points)}}</text>
			</view>
		</view>
		<!-- <view class="points-bg">
			<image src="/static/index_slices/points_bg.png"></image>
		</view> -->
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	const points = ref(0)
	points.value = JSON.parse(uni.getStorageSync('userInfo')).score
	const toAccount = ()=>{
		uni.navigateTo({
			url:`/goodsPages/pages/goods/points-account?title=积分账户&index=3&price=${points.value}`
		})
	}
</script>

<style lang="scss" scoped>
.my-points{
	height: 270rpx;
	color: #fff;
	font-size: 36rpx;
	background: url('/static/index_slices/points_bg.png') no-repeat;
	background-position: right;
	margin: 0 60rpx;
	display: flex;
	align-items: center;
	width: calc(100vw - 120rpx);
	margin: 0 auto;
	box-sizing: border-box;
	
	.points-content{
		width: 311rpx;
	}
	.points-btn{
		display: flex;
		align-items: center;
		.btn{
			width: 150rpx;
			height: 44rpx;
			padding-right: 38rpx;
			line-height: 1;
			background-color: #FF6964;
			border: none;
			border-radius: 3rpx 21rpx 21rpx 26rpx;
			color: #fff;
			background-image: url('/static/index_slices/small-more.png');
			background-repeat: no-repeat;
			background-position: 127rpx center;
			background-size:10rpx 17rpx;
			font-size: 26rpx;
		}
		
	}
	.points-num{
		background: url('/static/index_slices/mypoints.png') no-repeat left center;
		font-size: 70rpx;
		padding-left: 70rpx;
	}
}
</style>